<template>
  <el-card>
    <!-- CSS命名规则：页面大写字母+位置 -->
    <div class="FRDheader">
      <h1>家庭档案信息表</h1>
    </div>
    <div class="FRDinfo">
      <span>{{ Frd.name }}</span>
      |
      <p>{{ Frd.sex == 0 ? "女" : "男" }}</p>
      |
      <p>{{ Frd.age }}</p>
      |
      <p>
        <el-tag
          style="font-size: 13px"
          :type="Frd.poverty === '0' ? '' : 'info'"
          >{{ Frd.poverty == 0 ? "普" : "贫" }}</el-tag
        >
      </p>
    </div>
    <div class="FRDcontent">
      <h3>家庭成员列表</h3>
      <el-table
        :data="FRD"
        border
        id="eltable"
        height="61vh"
        :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="name" fixed label="姓名" />
        <el-table-column prop="signing" label="是否签约">
          <template #default="props">
            <el-tag :type="props.row.signing === '0' ? 'warning' : 'success'">
              {{ props.row.signing == 0 ? "未签约" : "已签约" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="checkup" label="是否体检">
          <template #default="props">
            <el-tag :type="props.row.checkup === '0' ? 'warning' : 'success'">
              {{ props.row.checkup == 0 ? " 未体检" : "已体检" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="relation" label="与户主关系" />
        <el-table-column prop="poverty" label="人群分类">
          <template #default="props">
            <el-tag :type="props.row.poverty === '0' ? '' : 'info'">
              {{ props.row.poverty == 0 ? "普通户" : "贫困户" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template #default="props">
            {{ props.row.sex == 0 ? "女" : "男" }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="maritalrelation" label="婚姻" />
        <el-table-column prop="idcard" label="身份证号" width="200" />
        <el-table-column prop="borthday" label="出生日期" />
        <el-table-column prop="telephone" label="本人电话" width="150" />
        <el-table-column prop="healthrecord" label="健康档案号" width="220" />
      </el-table>
    </div>
  </el-card>
</template>
<script>
import { recordFamilyDetailsList } from "@/api/record.js";
export default {
  data() {
    return {
      familycode: "",
      Frd: {
        name: "",
        sex: "",
        age: "",
        poverty: "",
      },
      FRD: [],
    };
  },
  created() {
    this.familycode = this.$route.query.familycode;
    this.fetchRecord(this.familycode);
  },
  methods: {
    /**
     * 一般方法
     */
    fetchRecord(familycode) {
      //类似于根据ID查信息
      recordFamilyDetailsList(familycode).then((res) => {
        this.FRD = res.data.data;
        this.Frd = this.FRD[0];
      });
    },
  },
};
</script>
<style scoped>
.FRDcontent {
  height: 60vh;
}

.FRDcontent h3 {
  margin-left: 20px;
  margin-top: 10px;
}

.FRDcontent,
.FRDheader,
.FRDinfo {
  width: 100%;
  border-top: 1px solid rgb(108, 218, 218);
  background-color: rgb(236, 247, 247);
}

.FRDinfo {
  height: 6vh;
  line-height: 6vh;
  padding-left: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.FRDinfo span {
  font-size: 20px;
}

.FRDinfo p {
  font-size: 13px;
}

.FRDinfo p,
.FRDinfo span {
  padding-left: 10px;
  padding-right: 10px;
}

.FRDheader {
  height: 8vh;
  font-size: 30px;
  line-height: 8vh;
  text-align: center;
}
</style>
